
import React,{useState,useRef, useEffect} from 'react';


import getChatInfo from '../../api/News'
import '../../styles/News/chatRecords.scss'
const ChatRecords = (props) => {
  const [index] = useState( props.location.state.i)
  const [chatRecord] = useState(props.location.state.chatinfo[index].messages.others[0]);
  const [other, setother] = useState([])
  useEffect(()=>{
    const index = props.location.state.i
    Promise.resolve(getChatInfo).then(res=>{
      setother(
        res.data.info[index].ChatObject
      )
    })
  })
  
  const backgo=()=>{                                    //返回上一页
    // document.querySelector('footer').style.display='flex'   //底部路由导航恢复
     props.history.goBack();
  }
  const inputref = useRef(null)
  const listref = useRef()
  const send = ()=>{
    const li =  document.createElement('li')  //输入的li
    const robotli =  document.createElement('li')  //mock数据返回的 li
    //字符串
    const ulbody = '<span class="chat-time">2021-1-18 9:00 </span><div class="user-content right"><p class="userP">'+inputref.current.value + '</p><img class="useImg" src="" alt=""/></div>' 
    const robotbody = '<span class="chat-time">2021-1-18 9:00 </span><div class="serve-content left"><img  class="serveImg" src="" alt=""/><p class="serveP">'+chatRecord[Math.ceil(Math.random()*10)+''] +'</p></div>' 
    li.innerHTML= ulbody
    robotli.innerHTML= robotbody
    listref.current.appendChild(li)
    setTimeout(() => {
      listref.current.appendChild(robotli)
      listref.current.scrollTop = listref.current.scrollHeight  //滚动条回到底部
    }, 2000);
  }
  return (
     <div className='chatRecords'>
        <div className="chatRecords-header">
          <h2>{other}</h2>   
          <span className='iconfont' onClick={backgo}>&#xe601;</span>   
        </div>
        <div className="chat-content">
          <ul ref={listref}>
            <li>
              <span className="chat-time">2021-1-18 9:00 收到</span>
              <div className="user-content right">
                <p className='userP'>我是你爸爸发我答复发顺丰VS的归属dasddaeafa感</p>
                <img className='useImg' src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1195632485,430846802&fm=26&gp=0.jpg" alt=""/>
              </div>
            </li>
            <li>
              <span className="chat-time">2021-1-18 9:00 收到</span>
              <div className="serve-content left">
                <img  className='serveImg' src="" alt=""/>
                <p className='serveP'>sdasfasda</p>
              </div>
            </li>
            
            
            
            
         
          </ul>

          
        </div>
        <div className="input-area">
            <div className="input-options">
              <span className='iconfont'>&#xe615;</span>
              <div className="input-content">
                <input type="text" ref={inputref} />
                <button className="send" onClick={send}>发送</button>
              </div>
              <span className='iconfont'>&#xe63d;</span>
              <span className='iconfont'>&#xe64a;</span>
            </div>
            {/* <div className="keyboard">
            </div> */}
          </div> 
        
    </div>
  );
}


export default ChatRecords;
